React Native অ্যাপে Right-to-Left (RTL) লেআউট সাপোর্টের মাধ্যমে আপনি এমন ভাষার জন্য অ্যাপ তৈরি করতে পারেন যা আরবী, হিব্রু, ফার্সী ইত্যাদি ভাষা অনুসরণ করে, যেখানে লেখা ডান থেকে বাম দিকে চলে। React Native স্বাভাবিকভাবে RTL সাপোর্ট দেয়, এবং সহজেই আপনি এটি সক্রিয় করতে পারেন।
এই গাইডে আমরা দেখব কিভাবে React Native অ্যাপে RTL সাপোর্ট চালু করবেন এবং RTL লেআউটের জন্য কিছু স্টাইল ও ডিজাইন পরিবর্তন করবেন।
১. RTL Layout সক্রিয় করা
React Native স্বাভাবিকভাবেই বেশিরভাগ RTL-সম্পর্কিত স্টাইল এবং লেআউট অটো পরিচালনা করে, তবে প্রথমে আপনাকে এটি সক্রিয় করতে হবে। এটি করতে, React Native-এর I18nManager মডিউল ব্যবহার করতে হবে।
RTL সক্রিয় করার ধাপ:
I18nManagerইম্পোর্ট করে RTL চালু করুন:
React Native অ্যাপের ইনিশিয়াল পয়েন্টে, সাধারণত App.js ফাইলে, RTL সাপোর্ট চালু করা হয়।
import React, { useEffect } from 'react';
import { I18nManager, Text, View, Button } from 'react-native';
const App = () => {
useEffect(() => {
// RTL লেআউট সক্রিয় করুন
I18nManager.forceRTL(true);
// RTL পরিবর্তন প্রভাবিত করার জন্য অ্যাপ রিলোড করুন
I18nManager.allowRTL(true);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>مرحبا بالعالم</Text> {/* আরবীতে "Hello World" */}
<Button title="Toggle RTL" onPress={() => I18nManager.forceRTL(!I18nManager.isRTL)} />
</View>
);
};
export default App;ব্যাখ্যা:
I18nManager.forceRTL(true)RTL সক্রিয় করার জন্য ব্যবহার করা হয়।I18nManager.allowRTL(true)RTL পরিবর্তনগুলি কার্যকর করতে সহায়তা করে।I18nManager.isRTLদিয়ে আপনি বর্তমানে RTL সক্রিয় আছে কিনা তা চেক করতে পারেন।
দ্রষ্টব্য: RTL সেটিংস পরিবর্তন করার পর অ্যাপ রিলোড করার পরামর্শ দেওয়া হয়।
২. RTL এর জন্য স্টাইলস পরিবর্তন করা
একবার RTL সক্রিয় হলে, React Native বেশিরভাগ লেআউট অটোভাবেই উল্টে ফেলবে। তবে কিছু বিশেষ স্টাইল যেমন প্যাডিং, মার্জিন, টেক্সট অ্যালাইনমেন্ট, আপনি ম্যানুয়ালি ঠিক করতে পারেন।
textAlign ব্যবহার করে টেক্সট অ্যালাইনমেন্ট:
RTL লেআউটে, সাধারণত টেক্সট ডানে অ্যালাইন হয়, তাই আপনি টেক্সট অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে textAlign প্রপার্টি ব্যবহার করতে পারেন।
<Text style={{ textAlign: 'right' }}>مرحبا بالعالم</Text>এটি নিশ্চিত করবে যে টেক্সট সঠিকভাবে ভাষার দিকনির্দেশ অনুযায়ী অ্যালাইন হবে।
লেআউট মিরর করা:
React Native বেশিরভাগ লেআউট কম্পোনেন্ট যেমন flexDirection, padding, এবং margin উল্টে দেয় RTL মোডে। তবে, কিছু ক্ষেত্রে আপনি ম্যানুয়ালি কিছু স্টাইল পরিবর্তন করতে পারেন।
<View style={{ flexDirection: 'row', marginRight: 10, marginLeft: 10 }}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>RTL মোডে, লেআউট অটোভাবেই Left Item এবং Right Item এর অর্ডার পাল্টে দেবে।
StyleSheet ব্যবহার করে RTL স্টাইল পরিবর্তন:
আপনি I18nManager দিয়ে RTL বা LTR মোডের জন্য কন্ডিশনাল স্টাইল অ্যাপ্লাই করতে পারেন।
import { I18nManager, StyleSheet, Text, View } from 'react-native';
const App = () => {
const isRTL = I18nManager.isRTL;
return (
<View style={styles.container}>
<Text style={[styles.text, isRTL ? styles.textRTL : null]}>
{isRTL ? "مرحباً بالعالم" : "Hello World"}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
text: {
fontSize: 24,
textAlign: 'center',
},
textRTL: {
textAlign: 'right',
},
});
export default App;ব্যাখ্যা:
I18nManager.isRTLদিয়ে চেক করা হয়, এবং সেই অনুযায়ী RTL স্টাইল বা LTR স্টাইল কন্ডিশনালভাবে প্রয়োগ করা হয়।
৩. ইমেজ এবং আইকন RTL এর জন্য পরিবর্তন
RTL লেআউটে, আপনি ইমেজ এবং আইকনগুলোর অবস্থান পরিবর্তন করতে হতে পারে, যেন তা ভাষার নির্দেশনা অনুযায়ী সঠিকভাবে দেখায়। আপনি ইমেজ এবং আইকন মিরর করতে transform প্রপার্টি ব্যবহার করতে পারেন।
transform ব্যবহার করে ইমেজ মিরর করা:
import { Image, StyleSheet, View } from 'react-native';
const App = () => {
const isRTL = I18nManager.isRTL;
return (
<View style={styles.container}>
<Image
source={require('./path/to/your/image.png')}
style={[styles.image, isRTL ? { transform: [{ scaleX: -1 }] } : null]}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 100,
height: 100,
},
});
export default App;ব্যাখ্যা:
transform: [{ scaleX: -1 }]RTL মোডে ইমেজটিকে অনুভূমিকভাবে (হরাইজন্টালি) উল্টে দিবে।
৪. নেভিগেশনে RTL সমর্থন
React Navigation স্বাভাবিকভাবে ড্রয়ার এবং স্ট্যাক নেভিগেটরদের জন্য RTL সাপোর্ট দেয়, তবে আপনি ড্রয়ার পজিশন বা হেডার লেআউট কাস্টমাইজ করতে পারেন।
Drawer Navigator-এ RTL ব্যবস্থাপনা:
import React from 'react';
import { I18nManager } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
const Drawer = createDrawerNavigator();
function HomeScreen() {
return <Text>Home Screen</Text>;
}
function ProfileScreen() {
return <Text>Profile Screen</Text>;
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator drawerPosition={I18nManager.isRTL ? 'right' : 'left'}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}ব্যাখ্যা:
drawerPositionএর মানrightবাleftহিসেবে ডাইনামিকভাবে পরিবর্তন করা হয়েছে, যা RTL মোডের ওপর নির্ভর করে।
৫. RTL এবং LTR পরিবর্তন করা
আপনি যদি ডাইনামিকভাবে RTL এবং LTR এর মধ্যে পরিবর্তন করতে চান, তবে I18nManager.forceRTL(true) ব্যবহার করতে পারেন এবং এরপর অ্যাপ রিলোড করে পরিবর্তনগুলো কার্যকর করতে হবে।
import { I18nManager, Button } from 'react-native';
const SwitchDirection = () => {
const toggleRTL = () => {
const newDirection = !I18nManager.isRTL;
I18nManager.forceRTL(newDirection);
// RTL বা LTR পরিবর্তন কার্যকর করতে অ্যাপ রিলোড করুন
I18nManager.allowRTL(newDirection);
};
return <Button title="Switch RTL/LTR" onPress={toggleRTL} />;
};সারাংশ
- React Native এ RTL সাপোর্ট পাওয়ার জন্য
I18nManagerব্যবহার করতে হয়। - RTL চালু করার জন্য
I18nManager.forceRTL(true)ব্যবহার করা হয় এবং স্টাইলগুলো স্বয়ংক্রিয়ভাবে উল্টে যায়। - ইমেজ এবং আইকন মিরর করার জন্য
transformব্যবহার করা যায়। - React Navigation ড্রয়ার এবং স্ট্যাক নেভিগেটরগুলোর জন্য স্বয়ংক্রিয়ভাবে RTL সাপোর্ট দেয়, তবে আপনি কাস্টমাইজও করতে
পারেন।
- ডাইনামিকভাবে RTL এবং LTR পরিবর্তন করতে
I18nManager.forceRTL()ব্যবহার করা হয়।
এটি React Native অ্যাপগুলিকে বিভিন্ন ভাষার জন্য আরও ইন্টারন্যাশনালাইজড এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
